import { EditTwoTone } from '@ant-design/icons';
import { ModalForm, ProFormDateTimePicker, ProFormText } from '@ant-design/pro-components';
import { message } from 'antd';
import moment from 'moment';
import { fixOrderTime } from '../../service';
import { ChangeTimeParams, ParkingOrderDetail } from '../../types.d';

const ChangeTime = (props: { currOrder: ParkingOrderDetail; reload: () => void }) => {
  const { currOrder, reload } = props;
  return (
    <ModalForm<ChangeTimeParams>
      title="时间更改"
      width={500}
      layout="horizontal"
      modalProps={{ destroyOnClose: true }}
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 14 }}
      trigger={
        <EditTwoTone
          style={{
            // cursor: 'pointer',
            marginLeft: '5px',
          }}
          twoToneColor="#5895d0"
        />
      }
      initialValues={{
        orderNo: currOrder.orderNo,
        plateNumber: currOrder.plateNumber,
        newInTime: currOrder.inTime,
        newOutTime: currOrder.outTime,
      }}
      onFinish={async (values) => {
        const { newInTime, newOutTime } = values;
        if (new Date(newOutTime).getTime() - new Date(newInTime).getTime() <= 0) {
          message.warn({ content: '驶出时间必须大于驶入时间!', key: 'change_time' });
          return false;
        }
        const res = await fixOrderTime({
          id: currOrder._id,
          newInTime: values.newInTime,
          newOutTime: values.newOutTime,
        });
        if (res?.success) {
          message.success({ content: res.message, key: 'change_time' });
          reload();
          return true;
        }
        message.error({ content: res.message, key: 'change_time' });
        return false;
      }}
    >
      <ProFormText width="lg" label="订单编号" name="orderNo" disabled required />
      <ProFormText width="lg" label="车牌号码" name="plateNumber" disabled required />
      <ProFormDateTimePicker
        width="lg"
        label="驶入时间"
        name="newInTime"
        fieldProps={{
          disabledDate: (dateTime) => {
            return dateTime < moment(currOrder.inTime);
          },
        }}
      />
      <ProFormDateTimePicker
        width="lg"
        label="驶出时间"
        name="newOutTime"
        fieldProps={{
          disabledDate: (dateTime) => {
            return dateTime > moment(currOrder.outTime);
          },
        }}
      />
      <div style={{ paddingLeft: '15px', fontWeight: 'bold', color: 'red' }}>
        注意：修改后订单金额将根据修改后的时间重新进行计算
      </div>
      <div style={{ paddingLeft: '15px', fontWeight: 'bold', color: 'red' }}>
        重新选择的驶入时间不可早于原有时间，驶出时间不可晚于原有时间
      </div>
    </ModalForm>
  );
};

export default ChangeTime;
